<template>
  <div class="taskbar">
    <div class="start-btn" @click="$emit('toggleStartMenu')">
      <img src="../../../assets/home/begin.png" alt="开始" class="windows-logo">
      <span>开始</span>
    </div>
    <div class="taskbar-items">
      <div 
        class="taskbar-item" 
        v-for="(app, index) in apps" 
        :key="index"
        :class="{ 'active': app.active }"
        @click="$emit('toggleApp', app)"
      >
        <img :src="app.image" :alt="app.name" class="taskbar-icon">
      </div>
    </div>
    <SystemTray :time="currentTime" />
  </div>
</template>

<script setup>
import SystemTray from './SystemTray.vue'

defineProps({
  apps: {
    type: Array,
    required: true
  },
  showStartMenu: {
    type: Boolean,
    default: false
  },
  currentTime: {
    type: String,
    default: ''
  }
})

defineEmits(['toggleStartMenu', 'toggleApp'])
</script>

<style scoped lang="scss">
.taskbar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: rgba(32, 32, 32, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  z-index: 100;
}

.start-btn {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 12px;
  color: white;
  cursor: pointer;
  
  &:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
  
  .windows-logo {
    width: 16px;
    height: 16px;
    margin-right: 8px;
  }
}

.taskbar-items {
  display: flex;
  height: 100%;
  
  .taskbar-item {
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    
    &.active {
      // background-color: rgba(255, 255, 255, 0.2);
      border-bottom: 2px solid #0078d7;
    }
    
    .taskbar-icon {
      width: 24px;
      height: 24px;
    }
  }
}
</style>